<template>
	<view class="custom-recharge">
		<u-popup :show="show" mode="center" bgColor="transparent">
			<view class="popup">
				<image src="@/static/integral/popup_bg.png" mode=""></image>
				<view class="box">
					<view class="title">
						自定义积分
					</view>
					<view class="input">
						<text class="unit">¥</text>
						<input type="number" placeholder="请输入充值金额" v-model="money" />
						<text class="integral" v-show="money">{{money * jfmoney}}积分</text>
					</view>
					<view class="btns">
						<view class="cancel" @click="close">
							取消
						</view>
						<view class="submit" @click="submit">
							充值
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			jfmoney: {
				default: 10,
				type: [String,Array]
			}
		},
		data() {
			return {
				show: false,
				money: ''
			};
		},
		methods: {
			open() {
				this.show = true
			},
			close() {
				this.show = false
			},
			submit() {
				if (!this.money) {
					uni.showToast({
						icon: 'none',
						title: '请输入充值金额'
					})
					return
				}
				this.show = false
				this.$emit('onSubmit',this.money,this.money*this.jfmoney)
			}
		}
	}
</script>

<style lang="less" scoped>
	.custom-recharge {
		.popup {
			position: relative;
			width: 573rpx;
			height: 387rpx;
			padding: 46rpx 38rpx 32rpx;

			image {
				position: absolute;
				z-index: 1;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
			}
		}

		.box {
			position: relative;
			z-index: 10;

			.title {
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 31rpx;
				color: #333333;
				line-height: 42rpx;
			}

			.input {
				padding: 0 32rpx;
				margin-top: 28rpx;
				display: flex;
				align-items: center;
				width: 100%;
				height: 106rpx;
				background: #F6F7FB;
				border-radius: 38rpx;

				.unit {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 33rpx;
					color: #333333;
					margin-right: 10rpx;
				}

				input {
					flex: 1;
				}

				.integral {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 31rpx;
					color: #333333;
				}
			}

			.btns {
				margin-top: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.cancel,
				.submit {
					width: 200rpx;
					height: 70rpx;
					// background: #FFFFFF;
					box-shadow: 0rpx 4rpx 13rpx 8rpx rgba(245, 245, 245, 0.16);
					border-radius: 40rpx;
					text-align: center;
					line-height: 70rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 27rpx;
				}

				.cancel {
					margin-right: 33rpx;
					color: #666666;
					border: 1px solid #E6E6E6;
				}

				.submit {
					color: #B0DD67;
					background: #3D3D3D;
				}
			}






		}
	}
</style>